<template>
    <div id="login">
      <div class="md-example-child md-example-child-input-item-0">
        <md-field>
          <md-input-item
            ref="input0"
            title="登录名"
            placeholder="请输入登录名"
            is-amount
            :maxlength="10"
            v-model="username"
          >
          </md-input-item>
          <md-input-item
            title="密码"
            type="password"
            placeholder="请输入密码"
            v-model="password"
          ></md-input-item>
        </md-field>
      </div>
      <div class="md-example-child md-example-child-button md-example-child-button-1" @click="loginTyp">
          <md-button v-if="status" type="primary" size="small" plain round>登录</md-button>
          <md-button v-else type="primary" size="small" plain round loading>Loading</md-button>
      </div>
  </div>
</template>

<script>
import {Button, InputItem, Field} from 'mand-mobile'
export default {
  name: 'login',
  components: {
    [Button.name]: Button,
    [InputItem.name]: InputItem,
    [Field.name]: Field
  },
  data () {
    return {
      username: '',
      password: '',
      status: true
    }
  },
  methods: {
    valueInput: function () {
      this.txtVal = this.value.length
    },
    loginTyp: function () {
      if (this.username === '' || this.username === null) {
        alert('用户登录名不能为空')
      } else if (this.password === '' || this.password === null) {
        alert('用户密码不能为空')
      } else {
        alert(this.username)
        alert(this.password)
        this.status = false
      }
    }
  }
}
</script>
<style lang='stylus' scoped>
</style>
